<template>
  <div class="appraise-list">
    <el-form :inline="true" label-width="90px">
      <el-form-item label="商品搜索：">
        <el-input
          v-model="formOption.goodsName"
          style="width: 210px"
          placeholder="请输入商品名称进行搜索"
        />
      </el-form-item>

      <el-form-item label="评价时间：">
        <el-date-picker
          v-model="formOption.time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          valueFormat="yyyy-MM-dd HH:mm:ss"
          style="width: 300px"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="推荐状态：">
        <el-select v-model="formOption.isRecommend" placeholder="请选择推荐状态">
          <el-option
            v-for="item in ORDER_RECOMMEND_STATUS"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="评价星级：">
        <el-select v-model="formOption.star" placeholder="请选择评价星级">
          <el-option
            v-for="item in ORDER_TAGS_LEVEL"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="客户信息：">
        <ScrollSelect
          style="width: 210px"
          placeholder="请选择用户信息"
          :selected-value="formOption.userId"
          :get-list-methods="getListMethods"
          :get-list-format="getListFormat"
          :clearable="true"
          search-key="nickNameOrMobile"
          @selectedChange="selectedChange"
        />
      </el-form-item>

      <div class="flex justify-end">
        <el-form-item>
          <el-button type="primary" @click="search">筛选</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </div>
    </el-form>

    <Tabs
      :tabs="ORDER_APPRAISE_TABS"
      :is-show-num="false"
      :current-key="currentKey"
      @tab-click="tabHandleClick"
    />

    <div class="mt-20">
      <TableHeader />
      <template v-if="dataSource.length">
        <TableItem
          v-for="(item, index) in dataSource"
          :key="index"
          :details="item"
          @delete="deleteGoodsComment"
        />
        <Pagination
          v-show="total > 0"
          :total="total"
          :pageNo.sync="listQuery.pageNo"
          :pageSize.sync="listQuery.pageSize"
          @pagination="getGoodsComment"
        />
      </template>
      <el-empty v-else description="暂无内容"></el-empty>
    </div>
  </div>
</template>

<script>
import TableHeader from './components/TableHeader.vue'
import TableItem from './components/TableItem.vue'
import { ORDER_TAGS_LEVEL, ORDER_RECOMMEND_STATUS, ORDER_APPRAISE_TABS } from '@/enum/order'
export default {
  name: 'AppraiseList',
  components: {
    TableItem,
    TableHeader
  },
  data() {
    return {
      currentKey: 'allNum',
      formOption: {
        isRecommend: '',
        userId: ''
      },
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      dataSource: [],
      getListMethods: params => {
        return this.getUserSelectList(params)
      },
      getListFormat: (list = []) => {
        // 下拉框数据格式
        return list.map(({ nickName, mobile, id }) => ({
          label: `${nickName} ${mobile}`,
          value: id
        }))
      }
    }
  },
  computed: {
    // 评价等级
    ORDER_APPRAISE_TABS() {
      return ORDER_APPRAISE_TABS
    },
    // 评价星级
    ORDER_TAGS_LEVEL() {
      return ORDER_TAGS_LEVEL
    },
    // 评价状态
    ORDER_RECOMMEND_STATUS() {
      return ORDER_RECOMMEND_STATUS
    }
  },
  created() {
    this.getGoodsComment()
  },
  activated() {
    this.getGoodsComment()
  },
  methods: {
    tabHandleClick({ key, value }) {
      this.currentKey = key
      this.formOption.commentType = value
      this.getGoodsComment()
    },
    // 获取用户信息
    async getUserSelectList(params) {
      const {
        data: { records }
      } = await this.$http.user.user.getUserSelectList({ params })
      return records
    },
    // 监听选择用户信息
    selectedChange(id) {
      this.formOption.userId = id
    },
    // 获取评论列表
    async getGoodsComment() {
      const params = {
        ...this.listQuery,
        ...this.formOption
      }
      const { time } = this.formOption
      if (time) params.startTime = time[0] && time[0]
      if (time) params.endTime = time[1] && time[1]

      delete params.time

      const {
        data: { total, records }
      } = await this.$http.order.appraiseApi.getGoodsComment(params)
      this.total = total
      this.dataSource = records
    },
    // 删除评论
    async deleteGoodsComment(id) {
      const { status, msg } = await this.$http.order.appraiseApi.deleteGoodsComment(id)
      if (status === 200) {
        this.$message.success('已删除')
        if (this.dataSource.length === 1 && this.listQuery.pageNo > 1) {
          this.listQuery.pageNo--
        }
        this.getGoodsComment()
      } else {
        this.$message.error(msg)
      }
    },
    // 筛选
    search() {
      this.listQuery.pageNo = 1
      this.getGoodsComment()
    },
    // 重置
    reset() {
      this.formOption = {
        isRecommend: '',
        userId: ''
      }
      this.listQuery.pageNo = 1
      this.getGoodsComment()
    }
  }
}
</script>
